<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('树形列表')}`">{{ $t('树形列表') }}</t>
            <li>
                当行数据<span class="s-code">row</span>中包含<span class="s-code">children</span>字段时，那么列表将被视为树形列表。
            </li>
            <li>
                <span class="d-code">default-expand-all</span>可以控制是否默认展开全部数据行
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleToggle">切换第1行的展开状态</el-button>
        </div>
        <sib-table
            ref="sibTable"
            row-key="rowId"
            default-expand-all
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData">
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const sibTable = ref(null);
        const tableData = ref(Array(3).fill().map((_, i) => ({
            rowId: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            children: [
                {
                    rowId: `${i + 1}-1`,
                    name: `张三${i + 1}号的崽崽`,
                    sex: i % 2 ? '男' : '女',
                    height: 90,
                    status: i % 2,
                    age: 2,
                    children: [
                        {
                            rowId: `${i + 1}-1-1`,
                            name: `张三${i + 1}号的崽崽的崽崽`,
                            sex: i % 2 ? '男' : '女',
                            height: 90,
                            status: i % 2,
                            age: 2,
                            children: [],
                        },
                    ],
                },
            ],
        })));

        return {
            sibTable,
            indexConfig: { type: 'hidden' },
            tableColumn: [
                { label: '姓名', code: 'name', width: 300 },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData,
            handleToggle() {
                sibTable.value.toggleRowExpansion(tableData.value[0]);
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleToggle">切换第1行的展开状态</el-button>
        </div>
        <sib-table
            ref="sibTable"
            row-key="rowId"
            default-expand-all
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData">
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const sibTable = ref(null);
        const tableData = ref(Array(3).fill().map((_, i) => ({
            rowId: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            children: [
                {
                    rowId: \`\${i + 1}-1\`,
                    name: \`张三\${i + 1}号的崽崽\`,
                    sex: i % 2 ? '男' : '女',
                    height: 90,
                    status: i % 2,
                    age: 2,
                    children: [
                        {
                            rowId: \`\${i + 1}-1-1\`,
                            name: \`张三\${i + 1}号的崽崽的崽崽\`,
                            sex: i % 2 ? '男' : '女',
                            height: 90,
                            status: i % 2,
                            age: 2,
                            children: [],
                        },
                    ],
                },
            ],
        })));

        return {
            sibTable,
            indexConfig: { type: 'hidden' },
            tableColumn: [
                { label: '姓名', code: 'name', width: 300 },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData,
            handleToggle() {
                sibTable.value.toggleRowExpansion(tableData.value[0]);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
